<!-- 关于页面 -->
<template>
  <div class="w-full min-h-screen relative z-10 flex items-center">
    <div class="ml-[150px] md:ml-[50px] lg:ml-[150px] max-w-2xl">
      <h1 class="text-4xl lg:text-5xl mb-2 font-bold animate-fadeInUp animate-glow">
        <div class="text-2xl mb-4 text-white/80">( •̀ ω •́ )✧</div>
        关于我们
      </h1>
      <div class="bg-black/20 backdrop-blur-md rounded-lg p-6 border border-white/10 animate-fadeInUp">
        <div class="space-y-6">
          <div>
            <h2 class="text-xl font-semibold mb-3 flex items-center">
              <Icon icon="mdi:information" class="mr-2" />
              项目介绍
            </h2>
            <p class="text-white/80 leading-relaxed">
              这是一个简单而实用的服务器 IP 地址发布页面。我们提供实时更新的 IPv4 和 IPv6 地址信息，
              帮助您随时了解服务器的公网地址变化。
            </p>
          </div>
          
          <div>
            <h2 class="text-xl font-semibold mb-3 flex items-center">
              <Icon icon="mdi:feature-search" class="mr-2" />
              主要功能
            </h2>
            <ul class="space-y-2 text-white/80">
              <li class="flex items-center">
                <Icon icon="mdi:check-circle" class="mr-2 text-green-400" />
                实时显示 IPv4 和 IPv6 地址
              </li>
              <li class="flex items-center">
                <Icon icon="mdi:check-circle" class="mr-2 text-green-400" />
                一键复制地址到剪贴板
              </li>
              <li class="flex items-center">
                <Icon icon="mdi:check-circle" class="mr-2 text-green-400" />
                自动定期更新地址信息
              </li>
            </ul>
          </div>
          
          <div>
            <h2 class="text-xl font-semibold mb-3 flex items-center">
              <Icon icon="mdi:update" class="mr-2" />
              更新频率
            </h2>
            <p class="text-white/80 leading-relaxed">
              系统每 5 分钟自动更新一次 IP 地址信息，确保您始终获取最新的地址数据。
              您也可以通过点击刷新按钮手动更新数据。
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Icon } from '@iconify/vue'
</script> 